<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<link rel="stylesheet" type="text/css" href="/soasuite/style/soasuite.css" />
	</head>
	<body>
		<div style="width:300px;float:left;padding:5px;">
			<div class="header">
				Tools
			</div>
			<div class="container">
				<div>
					some
					<br>
					text
					<br>
				</div>
				<br/>
				<p>
					Div buttons
				</p>
				<div class="button">
					Add project
				</div>
				<div class="button">
					Add service
				</div>
				<div class="button">
					Add test suite
				</div>
				<p>
					Span buttons
				</p>
				<span class="button">Add project</span>
				<span class="button">Add service</span>
				<span class="button">Add test suite</span>
			</div>
		</div>
		<div style="width:400px;float:left;padding:5px;">
			<div class="header">
				Forms
			</div>
			<div class="container">
				<p>
					Inputs
				</p>
				<span class="inputLabel">Name:</span>
				<input type="text" name="fname" />
				<br />
				<span class="inputLabel">Email:</span>
				<input type="email" name="user_email" />
				<br />
				<span class="inputLabel">Age:</span>
				<input type="number" min="18" max="90" />
				<br />
				<span class="inputLabel">Range:</span>
				<input type="range" min="18" max="90" />
				<br />
				<span class="inputLabel">Date:</span>
				<input type="date" name="user_date" />
				<br />
				<span class="inputLabel">Car</span>
				<select>
					<option value="volvo">Volvo</option>
					<option value="saab">Saab</option>
					<option value="mercedes">Mercedes</option>
					<option value="audi">Audi</option>
				</select>
				<br />
				<span class="inputLabel">Car List:</span>
				<select size="4">
					<option value="volvo">aVolvo</option>
					<option value="saab">Saab</option>
					<option value="mercedes">Mercedes</option>
					<option value="audi">Audi</option>
				</select>
				<br />
				<input type="submit" value="Submit" />
			</div>
		</div>
		<div style="width:400px;float:left;padding:5px;">
			<div class="header">
				Wizard/Configuration
			</div>
			<div class="container">
				<div class="largeCategory">
					Service configuration
				</div>
				<p>
					This is the service configuration
				</p>
				<div class="smallCategory">
					Endpoint configuration
				</div>
				<p>
					This is the endpoint configuration
				</p>
				<div class="smallCategory">
					Breadcrumb sample
				</div>
				<div style="margin-left:20px;">
					<span class="breadcrumb">Project</span>
					<span class="breadcrumb">Serivce</span>
					<span class="breadcrumb">Configuration</span>
				</div>
				<div class="smallCategory">
					Another separator
				</div>
				<p>
					should be visible
				</p>
			</div>
		</div>
		<div style="width:400px;float:left;padding:5px;">
			<div class="header">
				Tables
			</div>
			<div class="container">
				<div class="largeCategory">
					Table and item examples
				</div>
				<p>
					Table example
				</p>
				<table cellpadding="0" style="width:100%">
					<tr class="headerrow">
						<td>Table header 1</td><td>Table header 2</td><td>Table header 1</td>
					</tr>
					<tr class="celloddrow">
						<td>Cell 1</td><td>Cell 2</td><td>Cell 1</td>
					</tr>
					<tr class="cellevenrow">
						<td>Cell 1</td><td>Cell 2</td><td>Cell 1</td>
					</tr>
					<tr class="celloddrow">
						<td>Cell 1</td><td>Cell 2</td><td>Cell 1</td>
					</tr>
					<tr class="cellevenrow">
						<td>Cell 1</td><td>Cell 2</td><td>Cell 1</td>
					</tr>
				</table>
			</div>
		</div>
		<div style="width:400px;float:left;padding:5px;">
			<div class="header">
				Coding
			</div>
			<div class="container">
				<div class="smallCategory">
					Coding
				</div>
				<p>
					Code sample
				</p>
				<pre class="code">
begin {
	public static function():void {
		//this is a very long comment and I need to see if it adds overflow
		//comment #2
		<span style="background-color:#FF0000">//comment #3</span>
		//comment #4

		//no return needed
	}
}
				</pre>
			</div>
		</div>
		</div>
	</body>
</html>